import React from 'react'
import {nanoid} from 'nanoid'
import './index.css'
export default function Header({ todoList, setTodoList }) {
  //添加人物的事件函数
  function publishHandle(e) {
    //判断是否点击回车，不是回车直接结束代码执行
    if (e.keyCode !== 13) return;
    //获取表单输入内容，清除空格
    const publishValue = e.target.value.trim();
    //判断表单是否为空
    if (!publishValue) return alert('输入内容不能为空');
    //拿到父组件的setTodoList改变todoList
    setTodoList([{ id: nanoid(), name: publishValue, done: false }, ...todoList])
    e.target.value=''
  }
  return (
    <div className="todo-header">
      <input type="text" onKeyUp={publishHandle} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
